<template>
    <div id="home">
        <el-row :gutter="10">
            <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
                <el-card>
                    <p>今日登录: {{ store.todayLogin }}</p>
                    <el-progress :percentage="store.loginPercent" :stroke-width="26" :text-inside="true" color="#f56c6c" />
                    <el-divider />
                    <div class="card-left">本月登录</div>
                    <div class="card-right">{{ store.totalLogin }}</div>
                </el-card>
            </el-col>
            <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
                <el-card>
                    <p>今日注册: {{ store.todayRegister }}</p>
                    <el-progress :percentage="store.registerPercent" :stroke-width="26" :text-inside="true" color="#f56c6c" />
                    <el-divider />
                    <div class="card-left">总用户量</div>
                    <div class="card-right">{{ store.totalRegister }}</div>
                </el-card>
            </el-col>
            <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
                <el-card>
                    <p>在线课程: {{ store.onselfLessons }}</p>
                    <el-progress :percentage="store.lessonPercent" :stroke-width="26" :text-inside="true" color="#f56c6c" />
                    <el-divider />
                    <div class="card-left">总课程数</div>
                    <div class="card-right">{{ store.totalLessons }}</div>
                </el-card>
            </el-col>
            <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
                <el-card>
                    <p>今日订单: {{ store.todayOrders }}</p>
                    <el-progress :percentage="store.orderPercent" :stroke-width="26" :text-inside="true" color="#f56c6c" />
                    <el-divider />
                    <div class="card-left">总订单量</div>
                    <div class="card-right">{{ store.totalOrders }}</div>
                </el-card>
            </el-col>
            <el-col :xs="12" :sm="6" :md="6" :lg="3" :xl="3">
                <CardBase color="rgb(255,133,192)" icon="home" title="分类" @click="handleLink('course_category')" />
            </el-col>
            <el-col :xs="12" :sm="6" :md="6" :lg="3" :xl="3">
                <CardBase color="rgb(255,133,192)" icon="home" title="课程" @click="handleLink('course_lesson')" />
            </el-col>
            <el-col :xs="12" :sm="6" :md="6" :lg="3" :xl="3">
                <CardBase color="rgb(255,133,192)" icon="home" title="学员" @click="handleLink('education_students')" />
            </el-col>
            <el-col :xs="12" :sm="6" :md="6" :lg="3" :xl="3">
                <CardBase color="rgb(255,133,192)" icon="home" title="开通课程" @click="handleLink('education_lessons')" />
            </el-col>
            <el-col :xs="12" :sm="6" :md="6" :lg="3" :xl="3">
                <CardBase color="rgb(255,133,192)" icon="home" title="订单" @click="handleLink('order_search')" />
            </el-col>
            <el-col :xs="12" :sm="6" :md="6" :lg="3" :xl="3">
                <CardBase color="rgb(255,133,192)" icon="home" title="广告" @click="handleLink('center_banner')" />
            </el-col>
        </el-row>
        <el-divider />
        <el-row :gutter="10">
            <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
                <el-card>
                    <LineChart :categories="store.loginDatas.categories" 
                        :datas="store.loginDatas.datas"
                        :height="400" />
                </el-card>
            </el-col>
            <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
                <el-card>
                    <LineChart :categories="store.orderDatas.categories" 
                        :datas="store.orderDatas.datas"
                        :height="400" />
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>

<script setup lang="ts">
import { onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { useHomeStore } from '@/stores/home'
import CardBase from '@/components/cardbase/index.vue'
import LineChart from '@/components/echart/line.vue'

const store = useHomeStore()
const router = useRouter()
onMounted(() => store.getHomeData())

const handleLink = (name: string) => {
    router.push({ name })
}
</script>

<style>
#home{
  padding: 20px;
}
.card-left{
  display:inline;
}
.card-right{
  float:right;
}
</style>